<template>
    <div class="tips-dialog">
        <el-dialog
            title="提示"
            v-model="showType"
            width="590px"
        >
            <div class="tips-dialog-body">
                <div
                    v-if="type == 'success'"
                    class="success-tips"
                >
                    <img src="@/assets/img/statistics/success.png" alt="">
                </div>
                <div
                    v-if="type == 'error'"
                    class="error-tips"
                >
                    <img src="@/assets/img/statistics/error.png" alt="">
                </div>
                <p class="info">{{ info }}</p>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    class="btn-hover"
                    size="small"
                    @click="sure"
                >
                    确定
                </el-button>
                <el-button
                    v-if="type == 'error'"
                    round
                    class="btn-hover"
                    size="small"
                    @click="cancel"
                >
                    取消
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showType: false,
            type: 'success',
            info: ''
        };
    },

    methods: {
        init(obj) {
            const { type, info } = obj;
            this.type = type;
            this.info = info;
            this.showType = true;
        },

        sure() {
            this.showType = false;
            this.$emit('sure');
        },

        cancel() {
            this.showType = false;
            this.$emit('cancel');
        }
    }
}
</script>

<style lang="scss" scoped>
.tips-dialog {
    .tips-dialog-body {
        padding: 16px 0 0 0;
        .success-tips {
            text-align: center;
            color: #68c23b;
            img {
                height: 50px;
            }
        }

        .error-tips {
            text-align: center;
            img {
                height: 50px;
            }
        }

        .info {
            margin-top: 30px;
            text-align: center;
            color: #727272;
            font-weight: 400;
            font-size: 16px;
        }
    }

    .dialog-footer {
        text-align: center;
        padding-bottom: 21px;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }
}
</style>
